<template>
	<view class="u-wrap">
		<view class="u-menu-wrap">
			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
				<view v-for="(item,index) in tabbar" :key="index" class="u-tab-item"
					:class="[current==index ? 'u-tab-item-active' : '']" :data-current="index"
					@tap.stop="swichMenu(index,item.viewId)">
					<text class="u-line-1">{{item.name}}</text>
				</view>
			</scroll-view>
			
			<scroll-view scroll-y :scroll-into-view="viewId" :scroll-with-animation="true" class="right-box">
				<!-- 品牌车系 -->
				<view class="model pingpai-model" id="pingpaichexi" @click="changeCar">
					<view class="pingpai-model-l">品牌车系</view>
					<view class="pingpai-model-r">{{ checkJson.modelName || '请选择车系' }} <u-icon name="arrow-right" size="22" color="#999"></u-icon></view>
				</view>
				
				<!-- 车价 -->
				<view class="model chejia-model" id="chejia">
					<view class="chejia-model-title">
						<view class="chejia-model-title-bq">车价<text class="dw">(万)</text></view>
						<view class="chejia-model-title-text">
							<block>{{ minValue }} ~ {{ maxValue==50?'不限':maxValue}}</block>
						</view>
					</view>
					<view class="chejia-model-slider">
						<!-- 区间滑动选择器 -->
						<range-slider 
							v-if="isTrue"
							:width="slideWidth"
							:height="slideHeight"
							:blockSize="slideBlockSize"
							:min="slideMin"
							:max="slideMax"
							:values="priceValues"
							@rangechange="onRangeChange"
						>
							<view slot="minBlock" class="range-slider-block">{{ minValue }}</view>
							<!-- //左边滑块的内容 -->
							<view slot="maxBlock" class="range-slider-block">{{ maxValue }}</view>
							<!-- //右边滑块的内容 -->
						</range-slider>
					</view>
					<view class="chejia-model-list">
						<text>0</text>
						<text>10</text>
						<text>20</text>
						<text>30</text>
						<text>40</text>
					<!-- 	<text>50</text> -->
						<text>不限</text>
					</view>
				</view>
				
				<!-- 车身结构 -->
				<radioTag @itemTo="cheshengTap" id="cheshengjiegou" title="车身结构" :hxActive="checkJson.vehicleStructure?checkJson.vehicleStructure.num:-1" :activeNum="activeNum" :list="vehicleStructureList"></radioTag>
				
				<!-- 座位数 -->
				<radioTag @itemTo="zuoweiTap" id="zuoweishu" title="座位数" :hxActive="checkJson.zuowei?checkJson.zuowei.num:-1" :activeNum="activeNum" :list="arrListTwo"></radioTag>
				
				<!-- 车龄 -->
				<view class="model chejia-model" id="chelin">
					<view class="chejia-model-title">
						<view class="chejia-model-title-bq">车龄<text class="dw">(年)</text></view>
						<view class="chejia-model-title-text">
							<block>{{ minValueTwo }} ~ {{ maxValueTwo==10?'不限':maxValueTwo }}</block>
						</view>
					</view>
					<view class="chejia-model-slider">
						<!-- 区间滑动选择器 -->
						<range-slider 
							v-if="isTrue"
							:width="slideWidth"
							:height="slideHeight"
							:blockSize="slideBlockSize"
							:min="slideMin"
							:max="slideMaxTwo"
							:values="cheLingValues"
							@rangechange="onRangeChangeTwo"
						>
							<view slot="minBlock" class="range-slider-block">{{ minValueTwo }}</view>
							<!-- //左边滑块的内容 -->
							<view slot="maxBlock" class="range-slider-block">{{ maxValueTwo }}</view>
							<!-- //右边滑块的内容 -->
						</range-slider>
					</view>
					<view class="chejia-model-list">
						<text>0</text>
						<text>2</text>
						<text>4</text>
						<text>6</text>
						<text>8</text>
						<text>不限</text>
					</view>
				</view>
				
				<!-- 里程 -->
				<view class="model chejia-model" id="licheng">
					<view class="chejia-model-title">
						<view class="chejia-model-title-bq">里程<text class="dw">(万公里)</text></view>
						<view class="chejia-model-title-text">
							<block>{{ minValueThree }} ~ {{ maxValueThree==14?'不限':maxValueThree }}</block>
						</view>
					</view>
					<view class="chejia-model-slider">
						<!-- 区间滑动选择器 -->
						<range-slider 
							v-if="isTrue"
							:width="slideWidth"
							:height="slideHeight"
							:blockSize="slideBlockSize"
							:min="slideMin"
							:max="slideMaxThree"
							:values="mileageValues"
							@rangechange="onRangeChangeThree"
						>
							<view slot="minBlock" class="range-slider-block">{{ minValueThree }}</view>
							<view slot="maxBlock" class="range-slider-block">{{ maxValueThree }}</view>
						</range-slider>
					</view>
					<view class="chejia-model-list">
						<text>0</text>
						<text>3</text>
						<text>6</text>
						<text>9</text>
						<text>12</text>
						<text>不限</text>
					</view>
				</view>
				
				<!-- 过户次数 -->
				<radioTag @itemTo="guohuTap" id="guohucishu" title="过户次数" :hxActive="checkJson.guohu?checkJson.guohu.num:-1" :activeNum="activeNum" :list="arrListThree"></radioTag>
				
				<!-- 续航里程 -->
				<radioTag @itemTo="xuhangTap" id="xuhanglicheng" title="续航里程" :hxActive="checkJson.xuhang?checkJson.xuhang.num:-1" :activeNum="activeNum" :list="arrListFour"></radioTag>
				
				<!-- 电池类型 -->
				<radioTag @itemTo="dianchiTap" id="dianchileix" title="电池类型" :hxActive="checkJson.dianchi?checkJson.dianchi.num:-1" :activeNum="activeNum" :list="arrListFive"></radioTag>
			</scroll-view>
		</view>
		
		<!-- 提交 -->
		<view class="footer-btn">
			<view class="footer-btn-cz" @click="btnCz">重置</view>
			<view class="footer-btn-ok" @click="btnOk">确定</view>
		</view>
	</view>
</template>

<script>
	import API from "@/api/morePage.js"
	export default {
		data() {
			return {
				tabbar: [
					{name:'品牌车系',viewId:'pingpaichexi'},
					{name:'车价',viewId:'chejia'},
					{name:'车身结构',viewId:'cheshengjiegou'},
					{name:'座位数',viewId:'zuoweishu'},
					{name:'车龄',viewId:'chelin'},
					{name:'里程',viewId:'licheng'},
					{name:'过户次数',viewId:'guohucishu'},
					{name:'续航里程',viewId:'xuhanglicheng'},
					{name:'电池类型',viewId:'dianchileix'},
				],
				current:0,
				viewId: '',
				// 滑块
				isTrue: true,
				minValue: 0,
				maxValue: 50,
				priceValues: [0, 50],
				slideWidth: 550,
				slideHeight: 80,
				slideBlockSize: 56,
				slideMin: 0,
				slideMax: 50,
				
				minValueTwo: 0,
				maxValueTwo: 10,
				slideMaxTwo: 10,
				cheLingValues: [0, 10],
				
				minValueThree: 0,
				maxValueThree: 14,
				slideMaxThree: 14,
				mileageValues: [0, 14],
				// 车身
				vehicleStructureList:[],
				// 座位数
				arrListTwo:[
					{num:1,name:'2座',seatsNumUp:2,seatsNumDown:2},
					{num:2,name:'4座',seatsNumUp:4,seatsNumDown:4},
					{num:3,name:'5座',seatsNumUp:5,seatsNumDown:5},
					{num:4,name:'6座',seatsNumUp:6,seatsNumDown:6},
					{num:5,name:'7座以上',seatsNumUp:7,seatsNumDown:""}
				],
				// 过户次数
				arrListThree:[
					{num:1,name:'0次',numberOfTransfersUp:0,numberOfTransfersDown:0},
					{num:2,name:'1次',numberOfTransfersUp:1,numberOfTransfersDown:1},
					{num:3,name:'2次',numberOfTransfersUp:2,numberOfTransfersDown:2},
					{num:4,name:'3次',numberOfTransfersUp:3,numberOfTransfersDown:3},
					{num:5,name:'4次以上',numberOfTransfersUp:4,numberOfTransfersDown:""}
				],
				// 续航里程
				arrListFour:[
					{num:1,name:'300km以内',rechargeMileageDown:300,rechargeMileageUp:""},
					{num:2,name:'300-400km',rechargeMileageDown:400,rechargeMileageUp:300},
					{num:3,name:'400-500km',rechargeMileageDown:400,rechargeMileageUp:500},
					{num:4,name:'500-600km',rechargeMileageDown:600,rechargeMileageUp:500},
					{num:5,name:'600km以上',rechargeMileageDown:"",rechargeMileageUp:600}
				],
				// 电池类型
				arrListFive:[],
				activeNum: false,
				checkJson:{
					modelName:null,
					brandId: null,
					seriesId: null,
					// chesheng: null,
					vehicleStructure:null,
					zuowei: null,
					guohu: null,
					xuhang: null,
					dianchi: null,
				},
			}
		},
		onLoad(options) {
			this.getFilterValue()
			
			if(options.data){
				const itemJson = JSON.parse(decodeURIComponent(options.data));
				if(itemJson){
					this.minValue = itemJson.sellingPriceUp || 0
					this.maxValue= itemJson.sellingPriceDown==""?50:itemJson.sellingPriceDown
					this.minValueTwo= itemJson.cheLingUp || 0
					this.maxValueTwo= itemJson.cheLingDown==""?10:itemJson.cheLingDown
					this.minValueThree= itemJson.mileageUp || 0
					this.maxValueThree= itemJson.mileageDown==""?14:itemJson.mileageDown
					// 价格区间
					this.priceValues= itemJson.priceValues
					this.cheLingValues= itemJson.cheLingValues
					this.mileageValues= itemJson.mileageValues
					
					this.checkJson.modelName = itemJson.brandName + itemJson.seriesName
					this.checkJson.brandId = itemJson.brandId
					this.checkJson.seriesId = itemJson.seriesId
					
					this.checkJson.vehicleStructure = itemJson.vehicleStructureData
					
					this.checkJson.zuowei = itemJson.zuowei
					this.checkJson.guohu = itemJson.guohu
					this.checkJson.xuhang = itemJson.xuhang
					this.checkJson.dianchi = itemJson.batteryTypeData
				}
			}
		},
		onShow() {
			const _this = this
			const carType = getApp().globalData.carType
			// const info = uni.createSelectorQuery().select(".chejia-model-slider");
			// info.boundingClientRect((data)=> { //data - 各种参数
			// 	console.log(55,data)
			// 	_this.$nextTick(()=>{
			// 		_this.slideWidth = 560
			// 		console.log(66,_this.slideWidth)
			// 		_this.isTrue = true
			// 	})
			// }).exec()
			if(carType){
				_this.checkJson.modelName = carType.seriesName
				_this.checkJson.brandId = carType.brandId
				_this.checkJson.seriesId = carType.seriesId
			}
		},
		methods: {
			getFilterValue(){
				API.getFilterValue({}).then(res=>{
					console.log(res)
					this.arrListFive = res.data.batteryType.map((item,index) =>{
						item['name'] = item.label
						item['num'] = index+1
						return item
					})
					this.vehicleStructureList = res.data.carType.map((item,index) =>{
						item['name'] = item.label
						item['num'] = index+1
						return item
					})
					console.log("车身结构数据" + this.vehicleStructureList)
				})
			},
			btnCz(){
				this.checkJson = {
					modelName:'',
					brandId: null,
					seriesId: null,
					vehicleStructure: null, 
					zuowei: null,
					guohu: null,
					xuhang: null,
					dianchi: null,
				}
				this.activeNum = true
				this.priceValues = [0, 50]
				this.cheLingValues = [0, 10]
				this.mileageValues = [0, 14]
				this.minValue = 0
				this.maxValue = 50
				this.minValueTwo = 0
				this.maxValueTwo = 10
				this.minValueThree = 0
				this.maxValueThree = 14
			},
			btnOk(){
				this.checkJson = {
					...this.checkJson,
					minPrice: this.minValue,
					maxPrice: this.maxValue==50?'':this.maxValue,
					minYear: this.minValueTwo,
					maxYear: this.maxValueTwo==10?'':this.maxValueTwo,
					minLichen: this.minValueThree,
					maxLichen: this.maxValueThree==14?'':this.maxValueThree,
					priceValues: this.priceValues,
					cheLingValues: this.cheLingValues,
					mileageValues: this.mileageValues,
				}
				console.log(55,this.checkJson)
				uni.$emit('checkJson', this.checkJson)
				uni.navigateBack({
					delta: 1
				})
			},
			// 选择车型
			changeCar() {
				uni.navigateTo({
					url: "/pagesA/selectCar/selectCarBuyCar"
				})
			},
			cheshengTap(data){
				console.log('车身',data)
				this.activeNum = false
				this.checkJson.vehicleStructure = data
			},
			zuoweiTap(data){
				// console.log('座位数',data)
				this.activeNum = false
				this.checkJson.zuowei = data
			},
			guohuTap(data){
				// console.log('过户次数',data)
				this.activeNum = false
				this.checkJson.guohu = data
			},
			xuhangTap(data){
				// console.log('续航里程',data)
				this.activeNum = false
				this.checkJson.xuhang = data
			},
			dianchiTap(data){
				// console.log('电池类型',data)
				this.activeNum = false
				this.checkJson.dianchi = data
			},
			// 滑动选择
			onRangeChange: function(e) {
				this.priceValues = [Math.round(e.minValue), Math.round(e.maxValue)];
				this.minValue = Math.round(e.minValue)
				this.maxValue = Math.round(e.maxValue)
			},
			onRangeChangeTwo: function(e) {
				this.cheLingValues = [Math.round(e.minValue), Math.round(e.maxValue)];
				this.minValueTwo = Math.round(e.minValue)
				this.maxValueTwo = Math.round(e.maxValue)
			},
			onRangeChangeThree: function(e) {
				this.mileageValues = [Math.round(e.minValue), Math.round(e.maxValue)];
				this.minValueThree = Math.round(e.minValue)
				this.maxValueThree = Math.round(e.maxValue)
			},
			// 点击左边的栏目切换
			swichMenu(index,viewId) {
				if (index == this.current) return;
				this.current = index;
				this.viewId = viewId;
			
			}
		}
	}
</script>

<style lang="scss" scoped>
	.footer-btn{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		line-height: 70rpx;
		padding: 20rpx 24rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.footer-btn-cz{
			width: 160rpx;
			border-radius: 4rpx;
			border: 2rpx solid #d3d3d3;
			color: #999;
			font-size: 28rpx;
			text-align: center;
			box-sizing: border-box;
		}
		.footer-btn-ok{
			flex: 1;
			background-color: #002B56;
			color: #fff;
			text-align: center;
			margin-left: 60rpx;
			border: 2rpx solid #002B56;
		}
	}
	.range-slider-block{
		overflow: hidden;
		border-radius: 50%;
	}
	.badge-button {
		padding: 14rpx;
		background-color: #fff;
		color: #333;
		border-radius: 50%;
		font-size: 22rpx;
		line-height: 1;
		border: 1px solid #999;
		box-shadow: 2rpx 2rpx 10rpx #888888;;
	}
	.pingpai-model{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 24rpx;
		box-sizing: border-box;
		border-bottom: 20rpx solid #f8f8f8;
		.pingpai-model-l{
			font-size: 28rpx;
			color: #333;
			font-weight: bolder;
			margin-right: 60rpx;
		}
		.pingpai-model-r{
			font-size: 28rpx;
			color: #37A84E;
			overflow: hidden;
			text-overflow:ellipsis;
			white-space: nowrap;
		}
	}
	
	.chejia-model{
		padding: 0rpx 24rpx 24rpx;
		box-sizing: border-box;
		border-bottom: 20rpx solid #f8f8f8;
		.chejia-model-title{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx 0rpx;
			box-sizing: border-box;
			.chejia-model-title-bq{
				font-size: 28rpx;
				color: #333;
				font-weight: bolder;
				.dw{
					font-size: 24rpx;
					color: #999;
					font-weight: normal;
					margin-left: 20rpx;
				}
			}
			.chejia-model-title-text{
				font-size: 28rpx;
				color: #999;
			}
		}
		.chejia-model-slider{
			padding: 20rpx 0rpx;
			box-sizing: border-box;
		}
		.chejia-model-list{
			display: flex;
			padding: 0rpx 20rpx;
			box-sizing: border-box;
			justify-content: space-between;
			align-items: center;
			font-size: 26rpx;
			color: #999;
		}
	}
	
	
	.u-wrap {
		border-top: 2rpx solid #f8f8f8;
		height: calc(100vh);
		display: flex;
		flex-direction: column;
		padding-bottom: 114rpx;
		box-sizing: border-box;
	}

	.u-search-box {
		padding: 18rpx 30rpx;
	}

	.u-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;
	}

	.u-search-inner {
		background-color: rgb(234, 234, 234);
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 16rpx;
	}

	.u-search-text {
		font-size: 26rpx;
		color: $u-tips-color;
		margin-left: 10rpx;
	}

	.u-tab-view {
		width: 180rpx;
		height: 100%;
	
	}

	.u-tab-item {
		height: 110rpx;
		background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #444;
		font-weight: 400;
		line-height: 1;
		padding: 0 20rpx;
	}

	.u-tab-item-active {
		position: relative;
		color: #000;
		font-size: 28rpx;
		font-weight: 600;
		background: #fff;
	}

	// .u-tab-item-active::before {
	// 	content: "";
	// 	position: absolute;
	// 	border-left: 4px solid $u-type-primary;
	// 	height: 32rpx;
	// 	left: 0;
	// 	top: 39rpx;
	// }

	.u-tab-view {
		height: 100%;
	}

	.right-box {
		background-color: #fff;
	}
</style>
